/**
 * 练听力界面的单词挖空的组件，
 * 可以设置三种类型：
 * 	只显示横线
 * 	显示单词+横线
 * 	只显示单词
 */
class BlankView extends eui.Component {
	private wordDisplay: eui.Label;
	private line: eui.Rect;
	private $type: "wordOnly" | "wordAndLine" | "lineOnly";
	private $hasSkinLoaded = false;
	private $word: string;
	public constructor() {
		super();
		this.addEventListener(egret.Event.COMPLETE, this.onSkinLoaded, this);
	}

	public onSkinLoaded() {
		this.$hasSkinLoaded = true;
		this.updateChildren();
	}

	public set type(type: "wordOnly" | "wordAndLine" | "lineOnly") {
		this.$type = type;
		if (this.$hasSkinLoaded)
			this.updateChildren();
	}

	public get type() {
		return this.$type;
	}

	public set word(word: string) {
		this.$word = word;
		if (this.$hasSkinLoaded)
			this.wordDisplay.text = this.$word;
	}

	public get word() {
		return this.$word;
	}


	private updateChildren() {
		switch (this.$type) {
			case WORD_ONLY:
				this.wordDisplay.text = this.word;
				this.line.visible = false;
				this.line.width = 0;
				break;
			case WORD_AND_LINE:
				this.wordDisplay.text = this.word;
				this.line.visible = true;
				//强制让其与wordDisplay宽度一致
				this.line.left = 0;
				this.line.right = 0;
				this.line.width = 0;
				break;
			case LINE_ONLY:
				this.wordDisplay.text = "";
				this.line.visible = true;

				this.line.left = NaN;
				this.line.right = NaN;
				this.line.width = 62;
				break;
		}

	}
}

const WORD_ONLY = "wordOnly";
const WORD_AND_LINE = "wordAndLine";
const LINE_ONLY = "lineOnly";